<template>
    <div class="container">
        <!--    坐席签出报备 -->
        <div class="agentlogoutBackupsMain">
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline formData_form_inline"
                size="small"
            >
                <el-form-item label="坐席登录号">
                    <el-input v-model="formData.loginId" placeholder="请输入坐登录号"></el-input>
                </el-form-item>
                <el-form-item label="坐席工号">
                    <el-input v-model="formData.agentId" placeholder="请输入坐席工号"></el-input>
                </el-form-item>
                <el-form-item label="坐席姓名">
                    <el-input v-model="formData.loginName" placeholder="请输入坐席姓名"></el-input>
                </el-form-item>
                <el-form-item label="签出原因">
                    <el-input v-model="formData.logoutReason" placeholder="请输入签出原因"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-search"
                        @click="hanlesearch"
                        :loading="searchLoading"
                    >查 询</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-refresh-right"
                        @click="handleReset"
                        :loading="resetLoading"
                    >重 置</el-button>
                </el-form-item>
            </el-form>
            <div style="margin-bottom: 16px">
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-circle-plus-outline"
                    @click="hanlePush"
                >新增</el-button>
            </div>

            <el-table :data="tableData" width="100%" stripe border class="heard-bg">
                <el-table-column label="坐席登录号" prop="loginId"></el-table-column>
                <el-table-column label="坐席工号" prop="agentId"></el-table-column>
                <el-table-column label="时长" prop="loginLong"></el-table-column>
                <el-table-column label="签出时间" prop="logoutTime"></el-table-column>
                <el-table-column label="签入时间" prop="loginTime"></el-table-column>
                <el-table-column label="是否审核">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isExamine === '0'">不需要</span>
                        <span v-else-if="scope.row.isExamine === '1'">需要</span>
                    </template>
                </el-table-column>
                <el-table-column label="审核人" prop="examineUser"></el-table-column>
                <el-table-column label="当前状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === '0'">未审核</span>
                        <span v-else-if="scope.row.status === '1'">已审核</span>
                        <span v-else-if="scope.row.status === '2'">未通过</span>
                    </template>
                </el-table-column>
                <el-table-column label="签出原因" prop="logoutReason"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            circle
                            title="编辑"
                            @click="handleEdit(scope.row)"
                        />
                        <el-button
                            type="primary"
                            icon="el-icon-circle-check"
                            circle
                            title="审核"
                            @click="handleExamineOpinion(scope.row)"
                        />
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            circle
                            title="删除"
                            @click="handleDelete(scope.row)"
                        />
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                    :handleChangeSize="handleChangeSize"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                />
            </div>
        </div>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
            @close="handleClose"
        >
            <div slot="title">{{ EditTitle }}</div>
            <el-form
                :model="Edit"
                class="menu-setting"
                label-position="right"
                ref="Edit"
                label-width="130px"
                :rules="formRules"
                size="small"
            >
                <el-form-item label="坐席登录号" prop="loginId">
                    <el-input v-model="Edit.loginId" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="坐席工号" prop="agentId">
                    <el-input v-model="Edit.agentId" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="签出时间" prop="loginTime">
                    <!--<el-input v-model="Edit.loginTime" placeholder="请输入"  />-->
                    <el-date-picker
                        v-model="Edit.loginTime"
                        type="datetime"
                        placeholder="请选择签出时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="签入时间" prop="logoutTime">
                    <!--<el-input v-model="Edit.logoutTime" placeholder="请输入" />-->
                    <el-date-picker
                        v-model="Edit.logoutTime"
                        type="datetime"
                        placeholder="请选择签出时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="时长" prop="loginLong">
                    <el-input v-model="Edit.loginLong" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="是否审核" prop="isExamine">
                    <!--<el-input v-model="Edit.isExamine" placeholder="请输入" style="width: 150px;" />-->
                    <el-radio label="1" v-model="Edit.isExamine" border>是</el-radio>
                    <el-radio label="0" v-model="Edit.isExamine" border>否</el-radio>
                </el-form-item>
                <el-form-item label="审核人" prop="examineName">
                    <el-input v-model="Edit.examineName" placeholder="请输入" v-bind:disabled="true" />
                </el-form-item>
                <el-form-item label="审核意见" prop="examineOpinion" v-if="examineOpinion">
                    <textarea
                        v-model="Edit.examineOpinion"
                        placeholder="请输入"
                        style="width: 80%; height: 100px"
                    />
                    <el-radio v-if="noPass" label="1" v-model="isPass" border>通过</el-radio>
                    <el-radio v-if="noPass" label="0" v-model="isPass" border>不通过</el-radio>
                </el-form-item>
                <el-form-item label="签出原因" prop="logoutReason">
                    <textarea
                        v-model="Edit.logoutReason"
                        placeholder="请输入"
                        style="width: 80%; height: 100px"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="handleClose"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import SelectTree from '@/components/SelectTree/SelectTree.vue';
import { mapGetters } from 'vuex';
import { RegConfig } from '@/utils/RegConfig';
import { getToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'agentLogoutBackupList',
    components: {
        Pagination,
        SelectTree,
    },
    data() {
        return {
            formData: {
                loginTime: '',
                logoutTime: '',
                loginLong: '',
                isExamine: '',
                // examineUser: '',
                logoutReason: '',
                // loginId: '',
                agentId: '',
                loginName: '',
            },
            // 新增用户字段
            Edit: {
                id: '',
                loginTime: '',
                logoutTime: '',
                loginLong: '',
                isExamine: '',
                examineUser: '',
                logoutReason: '',
                loginId: '',
                agentId: '',
                status: '',
                isDelete: '',
                examineOpinion: '',
                examineName: '',
            },
            EditTitle: '',
            Show: false,
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            // 审核
            examineOpinion: false,
            // 通过未通过
            noPass: false,
            isPass: '',
            formRules: {
                isExamine: [
                    { required: true, message: '请选择是否需要确认', trigger: 'blur' },
                ],
                examineName: [
                    { required: true, message: '请选择审核人', trigger: 'blur' },
                ],
                logoutReason: [
                    { required: true, message: '请输入签出原因', trigger: 'blur' },
                ],
            },
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 表格内容
            tableData: [],
            workplaceList: [],
            departList: [],
            customerFlag: false,
            lesseeFlag: false,
            defaultProps: {
                parent: 'pid',
                value: 'id',
                label: 'deptName',
                children: 'child',
            },
        };
    },
    computed: {
        ...mapGetters([
            'teamInfo',
        ])
    },
    mounted() {
        this.getInitData(this.formData);
    },
    methods: {
        // 获取用户表格数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                // loginId: getToken() ? JSON.parse(getToken()).userAccount : '',
                // examineUser: getToken() ? JSON.parse(getToken()).userAccount : '',
            };
            params = Object.assign({}, params, form);
            console.log("params:::",params);
            this.$post.agentLogoutBackups.searchAgentLogoutBackupsByPage(params)
                .then((res) => {
                    if (res.data.success) {
                        console.log("res.data.content.AgentLogoutBackupsList:::",res.data.content.AgentLogoutBackupsList);
                        this.tableData = res.data.content.AgentLogoutBackupsList;
                        this.total = res.data.content.AgentLogoutBackupsCount;
                    }
                });
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            if (this.formData.agentId === '' && this.formData.loginId === '' && this.formData.loginName === '' && this.formData.logoutReason === '') {
                this.getInitData(this.formData);
            } else {
                this.getInitData(this.formData);
            }
        },
        // 点击重置
        handleReset() {
            this.formData = {
                userName: '',
                userAccount: '',
                workplaceId: '',
                agNum: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击新增
        hanlePush() {
            this.EditTitle = '添加电子报备';
            this.Edit = {};
            this.Edit.examineName = this.teamInfo.leaderName;
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 点击编辑
        handleEdit(row, flag) {
            this.EditTitle = '修改电子报备';
            this.Edit = JSON.parse(JSON.stringify(row));
            if(this.Edit.status === '1'){
                window.getElementMessage('提示', '该记录已经审核,不能进行编辑', "warning");
                return;
            }
            this.Edit.examineName = this.teamInfo.leaderName;
            this.Show = true;
            if (this.Edit.status === '0' && flag === 'S') {
                this.noPass = true;
                this.examineOpinion = true;
            } else if (this.Edit.status === '2') {
                this.noPass = false;
                this.examineOpinion = true;
            } else {
                this.noPass = false;
                this.examineOpinion = false;
            }
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 审核
        handleExamineOpinion(row) {
            this.Edit = JSON.parse(JSON.stringify(row));
            let loginId = JSON.parse(getToken()).userAccount;// 登录坐席工号
            if(this.Edit.examineUser === loginId){
                if (this.Edit.status === '1' || this.Edit.status === '2') {
                    // window.getElementMessage("该记录已经审核");
                    window.getElementMessage('提示', '该记录已经审核', "warning");
                    return;
                }
                this.examineOpinion = true;
                this.handleEdit(row, 'S');
            }else{
                window.getElementMessage('提示', '您没有审核权限', "warning");
                return;
            }
        },
        // 单个删除
        handleDelete(row) {
            this.$confirm('确认删除该记录？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.agentLogoutBackups.deleteById({ id: row.id })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.tableData.length === 1) {
                                    this.currentPage = this.currentPage - 1;
                                }
                                this.getInitData(this.formData);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 新增点击确定按钮
        submitEdit() {
            if (this.Edit.id) {
                // 编辑
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        if (this.Edit.isExamine === '1') {
                            if (this.isPass === '1') {
                                this.Edit.status = '1';
                            } else {
                                if (this.noPass) {
                                    this.Edit.status = '2';
                                } else {
                                    this.Edit.status = '0';
                                }
                            }
                        } else {
                            this.Edit.status = '1';
                        }
                        this.Edit.examineUser = this.teamInfo.leaderId;
                        this.$post.agentLogoutBackups.updateAgentLogoutBackupsById(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('修改成功！');
                                    this.getInitData(this.formData);
                                    // this.Show = false;
                                    // this.examineOpinion = false;
                                    this.handleClose();
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 添加
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        if (this.Edit.isExamine === '1') {
                            this.Edit.status = '0';
                        } else {
                            this.Edit.status = '1';
                        }
                        this.Edit.examineUser = this.teamInfo.leaderId;
                        this.$post.agentLogoutBackups.addAgentLogoutBackups(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('添加成功');
                                    this.getInitData(this.formData);
                                    // this.Show = false;
                                    // this.examineOpinion = false;
                                    this.handleClose();
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData();
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData();
        },
        handleClose() {
            this.Show = false;
            this.noPass = false;
            this.examineOpinion = false;
            this.isPass = '';
        }
    },
};
</script>

<style  lang="scss">
.container {
    width: 100%;
    height: 100%;
    .agentlogoutBackupsMain {
        width: 100%;
        background: #fff;
        margin-bottom: 15px;
        // border-radius:5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;

        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
    }
}
</style>
